終於來到了第二天，才來到短短的第二天發現，真的要持續三十天發文不是一件容易的事情，加上還有週末這件事，遇到惰性這種本能真的不是開玩笑的！

進入主題02 - JS and CSS Clock

我們一樣先釐清需求，就是讓畫面上的時針、分針、秒針跟著實際上的時間而走，而這裡個人認為依照Alex大大的邏輯，對我來說相對比較簡單又好懂，所以我也依照Alex大大的方式，先將時間都歸到12點鐘的方向，先稍微修改一下原作者Wes Bos的CSS樣式

      .second-hand::after {
        position: absolute;
        content: '';
        display: block;
        width: 10px;
        height: 50px;
        background-color: red;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 0%);
      }
      .min-hand::after {
        position: absolute;
        content: '';
        display: block;
        width: 10px;
        height: 40px;
        background-color: white;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 0%);
      }
      .hour-hand::after {
        position: absolute;
        content: '';
        display: block;
        width: 10px;
        height: 20%;
        background-color: white;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 0%);
      }

這邊稍微說明一下，使用了偽元素並且利用position將位置定位在中間的那個點，去做出三根針，轉動的方式是整個DOM的方向再轉，這對我來說相對好理解很多。

再來是JS程式碼的部分

      ///選取到DOM
      const secondHand = document.querySelector('.second-hand');
      const minsHand = document.querySelector('.min-hand');
      const hourHand = document.querySelector('.hour-hand');
      
      function setClock() {
      
      //獲取Date物件
      const data = new Date();
      
      //各指針的所在的位置，因為我們知道一個圓是360度，那秒針一次動一格當然就是去處以60秒，以此類推。
      const second = date.getSeconds() * 6; //  360/60
      const min = date.getMinutes() * 6;  //  360/60
      const hour = datd.getHours() * 30;  //360/12

      second.style.transform = `rotate(${secondDeg}deg)`;
      min.style.transform = `rotate(${secondDeg}deg)`;
      hour.style.transform = `rotate(${secondDeg}deg)`;
      }

      setClock();

      setInterval(setClock, 1000);
    </script>

基本上這樣就大功告成了，在Alex的影片裡還有講解到setInterval和setTimeout、requestanimationframe三種的差異與使用時機，以及將改成其他計時器的撰寫方式，在這裡真的推薦給各位不幸看見我文章的各位，Alex宅幹嘛還有更細節的時針在走時停在數字與數字之間的處理方式，而我這裡比較偏向於記錄自己學習的筆記，真正的學習到各種小技巧與更加詳細的解說，請各位觀看影片我相信學習到的會更多。

參考資料
Alex宅幹嘛
MDN Window.requestAnimationFrame()
MDN setInterval()